<!DOCTYPE html>
<html lang="zxx">

<head>
    <title>信标管理</title>
    <!-- custom-theme -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="" />
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>

<html>
<style>
    .form-control {
        width: 30% !important;
        margin-left: 35%;
    }

    label {
        margin-left: 35%;
    }

    #appCall {
        margin-left: 35%;
    }

    hr {
        border: 10px;
        border-bottom: 1px solid hsl(60, 12%, 5%);
        width: 90%;
        text-align: center;
    }

    .message {
        color: brown;
        margin-left: 35%;
    }

    #message {

        margin-bottom: 20px;
        color: rgb(185, 38, 38);
        text-align: center;
    }

    #message1,
    #message2 {
        margin-bottom: 40px;
        color: rgb(185, 38, 38);
        text-align: center;
    }

    #message2 {
        margin-bottom: 10px;
    }

    h1 {
        /* margin-left: 600px !important; */
        margin-top: 50px;
        margin-bottom: 50px;
        padding-top: 5vh;
        text-align: center;
    }

    hr {

        border: 5px;
        border-bottom: 5px solid #5c5c3d;
    }

    .active {
        background-color: #377bb5;
    }

    /* 版心 */
    .main {
        width: 60%;
        margin: 0 auto;
        padding-top: 2vh;
    }

    /* 选择键 */
    .btn-box {
        position: relative;
        width: 100% !important;
        margin-bottom: 7vh;
    }

    #btn1 {
        padding: 10px;

    }


    .btn2 {
        width: 100%;
        height: 100%;
        background-color: transparent;
        text-align: center;
        border: 0;
        outline: none;
    }

    .active {
        background-color: #377bb5;
        color: #fff;
    }

    .jz {
        background-color: #fff !important;

    }
    
    
    @media screen and (max-width: 991px) {
        .active {
            background-color: #377bb5;
            color: #fff;
        }

        #appCall {
            margin: 0;
        }
        .form-control {
            width: 60%!important;
            margin: 0 auto;
        }
        label {
            display: block!important;
            width: 60%!important;
            margin: 0 auto;
            text-align: left;
        }
        .btn-box {
            margin-bottom: 2vh;
        }
        .btn-box1 {
        
        width: 60%!important;
        margin: 0 auto;
        }
      .btn-box1 #appCall {
        margin-left: 0px;
        justify-content: space-between;
       }
      .btn-box1 #appCall:nth-child(2) {
        margin-left: 5px;
        justify-content: space-between;
       }
       #app2 .btn-box1 {
        width: 71%!important;
      }
     
      #app3 .btn-box1 {
        width: 71%!important;
      }
     
      .writeBox .btn-box1 {
        width: 63%!important;
      }
      
    }
</style>

<body>
    <div id="title">
        <h1>
            MPU测试平台
        </h1>
    </div>
    <hr>
    <div class="main">

        <div class="btn-box container">
            <!-- Standard button -->
            <div class="row">
                <div class="col-xs-18 col-md-2   active" id="btn1">
                    <button type="button" class="btn2">呼梯</button>
                </div>
                <div class="col-xs-18 col-md-2 " id="btn1">
                    <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                    <button type="button" class="btn2">远程清除故障</button>
                </div>
                <div class="col-xs-18 col-md-2 " id="btn1">
                    <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                    <button type="button" class="btn2 ">远程获取数据</button>
                </div>
                <div class="col-xs-18 col-md-2 " id="btn1">
                    <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                    <button type="button" class="btn2">单笔写入</button>
                </div>
                <div class="col-xs-18 col-md-2 " id="btn1">
                    <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                    <button type="button" class="btn2">后台资料修改</button>
                </div>
                <div class="col-xs-18 col-md-2 " id="btn1">
                    <!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
                    <button type="button" class="btn2">连续写入</button>
                </div>

            </div>

        </div>
    </div>
    <div id="message"></div>
    <div class="content container">
        <div class="item">
            <form id="app">
                <!-- <div id="message"></div> -->
                <div class="form-group">
                    <label for="exampleFormControlSelect1">呼梯方式</label>
                    <select class="form-control" id="exampleFormControlSelect1" v-model="callType">
                        <option value="01">DstFlr开放权限</option>
                        <option value="02">SrcFlr向下叫车</option>
                        <option value="03">SrcFlr向上叫车</option>
                        <option value="04">轿厢DstFlr呼梯</option>
                        <option value="05">SrcFlr开门</option>
                        <option value="06">SrcFlr关门</option>
                        <option value="07">VIP呼梯</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="exampleFormControlSelect1">电梯编号</label>
                    <input class="form-control floorNum" id="exampleFormControlSelect1" v-model="liftId" type="text"
                        lay-verify="required|pass" class="layui-input" maxlength="7">
                    <!-- <select class="form-control" id="exampleFormControlSelect1" v-model="liftId">
                    <option value="mmmmmmm">mmmmmmm</option>
                    <option value="b123456">b123456</option>
                    <option value="c123456">c123456</option>
                    <option value="d123456">d123456</option>
                    <option value="e123456">e123456</option>
                    <option value="f123456">f123456</option>
                    <option value="d123456">d123456</option>
                </select>-->
                </div>
                <div class="form-group">
                    <label for="exampleFormControlSelect1">出发楼层</label>
                    <select class="form-control" id="exampleFormControlSelect1" v-model="fromFloor">
                        <option value="01">1</option>
                        <option value="02">2</option>
                        <option value="03">3</option>
                        <option value="04">4</option>
                        <option value="05">5</option>
                        <option value="06">6</option>
                        <option value="07">7</option>
                        <option value="08">8</option>
                        <option value="09">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                        <option value="16">16</option>
                        <option value="17">17</option>
                        <option value="18">18</option>
                        <option value="19">19</option>
                        <option value="20">20</option>
                        <option value="21">21</option>
                        <option value="22">22</option>
                        <option value="23">23</option>
                        <option value="24">24</option>
                        <option value="25">25</option>
                        <option value="26">26</option>
                        <option value="27">27</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="exampleFormControlSelect1">目的楼层</label>
                    <select class="form-control" id="exampleFormControlSelect1" v-model="toFloor">
                        <option value="01">1</option>
                        <option value="02">2</option>
                        <option value="03">3</option>
                        <option value="04">4</option>
                        <option value="05">5</option>
                        <option value="06">6</option>
                        <option value="07">7</option>
                        <option value="08">8</option>
                        <option value="09">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                        <option value="16">16</option>
                        <option value="17">17</option>
                        <option value="18">18</option>
                        <option value="19">19</option>
                        <option value="20">20</option>
                        <option value="21">21</option>
                        <option value="22">22</option>
                        <option value="23">23</option>
                        <option value="24">24</option>
                        <option value="25">25</option>
                        <option value="26">26</option>
                        <option value="27">27</option>
                    </select>
                </div>
                    <div class="btn-box1">
                        <input type="button" class="btn btn-primary btn1" @click="appCall(0)" value="呼梯" id="appCall"
                            data-id="0" />
                        <input type="button" class="btn btn-primary" onclick="clearRes(0)" value="清理呼梯结果" id="appCall1" />
                    </div>
               
                <div id="message1"></div>
            </form>
        </div>
        <div class="item">
            <form id="app2">
                <div class="form-group">
                    <label for="exampleFormControlSelect1">电梯编号</label>
                    <input class="form-control" id="exampleFormControlSelect1" v-model="liftId" type="text"
                        maxlength="7">

                </div>
                <div class="btn-box1">
                    <input type="button" class="btn btn-primary btn1" @click="clear()" value="远程故障清除" id="appCall"
                        data-id="1" />
                    <input type="button" class="btn btn-primary" onclick="clearRes(1)" value="清空响应结果" id="appCall1" />
                </div>
                <div id="message1"></div>
            </form>
        </div>
        <div class="item">
            <form id="app3">
                <div class="form-group">
                    <label for="exampleFormControlSelect1">电梯编号</label>
                    <input class="form-control" id="exampleFormControlSelect1" v-model="liftId" type="text"
                        maxlength="7">
                </div>
                <div class="form-group">
                    <label for="exampleFormControlSelect1">addr</label>
                    <input class="form-control" id="exampleFormControlSelect1" placeholder="例如：20001000" v-model="addr"
                        type="text" maxlength="8">
                </div>
                <div class="form-group">
                    <label for="exampleFormControlSelect1">len</label>
                    <input class="form-control" id="exampleFormControlSelect1" placeholder="例如：0004" v-model="len"
                        type="text" maxlength="4">
                </div>
                <div class="btn-box1">
                    <input type="button" class="btn btn-primary messageBTN" @click="appCall()" value="远程获取数据"
                        id="appCall" data-id="2" />
                    <input type="button" class="btn btn-primary" onclick="clearRes(2)" value="清空响应结果" id="appCall1" />
                </div>
                <div id="message1"></div>
            </form>
        </div>
        <div class="item">
            <form id="app4">
                <div class="form-group">
                    <label for="exampleFormControlSelect1">电梯编号</label>
                    <input class="form-control" id="exampleFormControlSelect1" v-model="liftId" type="text"
                        maxlength="7">
                </div>
                <div class="form-group">
                    <label for="exampleFormControlSelect1">写入方式</label>
                    <select class="form-control" id="exampleFormControlSelect1" v-model="writerType">
                        <option value="1">byte写入</option>
                        <option value="2">word写入</option>
                        <option value="3">long写入</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="exampleFormControlSelect1">待写入addr</label>
                    <input class="form-control" id="exampleFormControlSelect1" placeholder="必须为8位" v-model="waddr"
                        type="text" maxlength="8">
                </div>
                <div class="form-group">
                    <label for="exampleFormControlSelect1">data</label>
                    <input class="form-control" id="exampleFormControlSelect1" placeholder="必须为8位" v-model="wdata"
                        type="text" maxlength="8">
                </div>
                <div class="btn-box1">
                    <input type="button" class="btn btn-primary messageBTN" @click="appCall()" value="写入" id="appCall"
                        data-id="2"/>
                    <input type="button" class="btn btn-primary" onclick="clearRes(3)" value="清空响应结果" id="appCall1" />
                </div>
                <div id="message1"></div>
            </form>
        </div>
        <div class="item">
            <form id="app5">
                <div class="form-group">
                    <label for="exampleFormControlSelect1">电梯编号</label>
                    <input class="form-control" id="exampleFormControlSelect1" v-model="liftId" type="text"
                        maxlength="7">
                </div>
                <div class="form-group">
                    <label for="exampleFormControlSelect1">len</label>
                    <input class="form-control" id="exampleFormControlSelect1" v-model="len" type="text" maxlength="4">
                </div>
                <div class="form-group">
                    <label for="exampleFormControlSelect1">data</label>
                    <input class="form-control" id="exampleFormControlSelect1" v-model="data" type="text">
                </div>
                <div class="btn-box1">
                    <input type="button" class="btn btn-primary messageBTN" @click="appCall()" value="写入" id="appCall"
                    data-id="2" />
                <input type="button" class="btn btn-primary" onclick="clearRes(4)" value="清空响应结果" id="appCall1" />
                </div>
                <div id="message1"></div>
            </form>
        </div>
        <div class="item">
            <form id="app6">
                <div class="form-group">
                    <label for="exampleFormControlSelect1">电梯编号</label>
                    <input class="form-control" id="exampleFormControlSelect1" v-model="liftId" type="text"
                        maxlength="7">
                </div>
                <div class="form-group">
                    <label for="exampleFormControlSelect1">代写入addr</label>
                    <input class="form-control" id="exampleFormControlSelect1" placeholder="例如：20001000" v-model="waddr"
                        type="text" maxlength="8">
                </div>
                <div class="btn-box1">
                    <div class="form-group">
                        <input type="button" class="btn btn-primary messageBTN" @click="appCall(6)" value="确定"
                            id="appCall" />
                    </div>
                </div>
                <div id="message2"></div>
                <div v-show="status" class="writeBox">
                    <div class="form-group">
                        <label for="exampleFormControlSelect1">len</label>
                        <input class="form-control" id="exampleFormControlSelect1" v-model="len" maxlength="4"
                            type="text">
                    </div>
                    <div class="form-group">
                        <label for="exampleFormControlSelect1">data</label>
                        <input class="form-control" id="exampleFormControlSelect1" v-model="data" type="text"
                            maxlength="8">
                    </div>
                    <div class="btn-box1">
                        <input type="button" class="btn btn-primary messageBTN" @click="appCall2(7)" value="连续写入"
                        id="appCall" data-id="2" />
                    <input type="button" class="btn btn-primary" onclick="clearRes(5)" value="清空响应结果" id="appCall1" />
                    </div>
                </div>
                <div id="message1"></div>
            </form>
        </div>
    </div>

</body>
<!-- <form class="layui-form" action=""></form> -->
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script src="Plugins/layui/layui.js"></script>
<form class="layui-form" action=""></form>
<script src="Plugins/vue.js"></script>
<script>
    var websocket = null;
    var myVar = null;
    var times;

    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
        websocket = new WebSocket("wss://ytcloud2.yungtay.com.cn:2443/ws");
        // websocket = new WebSocket("ws://localhost:2443/ws");
        console.log(websocket);
    } else {
        alert('当前浏览器 Not support websocket')
    }

    //发送消息
    function send() {
        var msg = '{nowFlr:' + Math.ceil(Math.random() * 8) + ',toFlr:' + Math.ceil(Math.random() * 8) + ',liftId:"mmmmmmm"}'
        websocket.send(msg)
    }

    function clearRes(id) {
        var divs = document.querySelectorAll('#message1');
        divs[id].innerHTML = '<br/>';
        // document.getElementById('message1').innerHTML = '<br/>';
    }


    //连接发生错误的回调方法
    websocket.onerror = function () {
        setMessageInnerHTML("WebSocket连接发生错误,请刷新浏览器");
    };

    //连接成功建立的回调方法
    websocket.onopen = function () {
        setMessageInnerHTML("WebSocket连接成功");

    }


    //连接关闭的回调方法
    websocket.onclose = function () {
        setMessageInnerHTML("WebSocket连接关闭,请刷新浏览器");
        clearInterval(myVar);
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
        closeWebSocket();
        clearInterval(myVar);
    }
    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    function setMessageInnerHTML1(id, innerHTML) {
        // 获取的message1的元素
        var divs = document.querySelectorAll('#message1');
        var id = id - 1
        divs[id].innerHTML += innerHTML + '<br/>';
    }
    function setMessageInnerHTML2(id, innerHTML) {
        // 获取的message1的元素
        var divs2 = document.querySelector('#message2');
        divs2.innerHTML = innerHTML + '<br/>';
    }
    function setMessageInnerHTML3(id, innerHTML) {
        // 获取的message1的元素
        var divs2 = document.querySelector('#message2');
        divs2.innerHTML = innerHTML + '<br/>';
        var writeBox = document.querySelector('.writeBox');
    }

    //关闭WebSocket连接
    function closeWebSocket() {
        clearInterval(myVar);
        websocket.close();
    }


    //接收到消息的回调方法
    websocket.onmessage = function (event) {
        if (event.data.length == 1) {
            layer.msg("该mpu处于停机状态");

        }
        if (event.data.substring(0, 2) == "12") {
            if (event.data.substring(2, 10) == "20000000") {
                //呼梯
                if (event.data.substring(18, 20) == "01") {
                    setMessageInnerHTML1(1, "呼梯成功---" + event.data.substring(20, 22) + "号梯");
                } else {
                    setMessageInnerHTML1(1, "呼梯失败");
                }
            } else if (event.data.substring(2, 10) == "20001000") {
                //远程清除数据
                if (event.data.substring(14, 16) == "01") {
                    setMessageInnerHTML1(2, "远程清理成功");
                } else {
                    setMessageInnerHTML1(2, "远程清理失败");
                }
            } else if (event.data.substring(2, 10) == "20002000") {
                //单笔写入
                if (event.data.substring(14, 16) == "01") {
                    setMessageInnerHTML1(4, "写成功");
                } else {
                    setMessageInnerHTML1(4, "写入失败");
                }
            } else if (event.data.substring(2, 10) == "20002100") {
                //后台资料修改
                if (event.data.substring(14, 16) == "01") {
                    setMessageInnerHTML1(5, "后台资料修改成功");
                } else {
                    setMessageInnerHTML1(5, "后台资料修改失败");
                }
            } else if (event.data.substring(2, 10) == "20003000") {
                //连续写入前确认
                if (event.data.substring(14, 16) == "01") {
                    setMessageInnerHTML3(6, "允许写入")
                    vm6._data.status = 1
                    vm6._data.len = ""
                    vm6._data.data = ""
                } else {
                    setMessageInnerHTML3(6, "不允许写入");
                }
            } else {
                //连续写入前确认
                if (event.data.substring(14, 16) == "01") {
                    setMessageInnerHTML1(6, "写入成功");
                } else {
                    setMessageInnerHTML1(6, "写入失败");
                }
            }
        } else if (event.data.substring(0, 2) == "21") {
            //远程读取
            setMessageInnerHTML1(3, "远程获取数据为--" + event.data.substring(14));
        }


    }
    var layer = '';
    layui.use('layer', function () {
        layer = layui.layer;
    });
    var vm = new Vue({
        el: "#app",
        data: {
            devType: "01",
            liftId: "",
            msgNo: "00",
            ver: "01",
            func: "12",
            addr: "20000000",
            len: "0007",
            data: "",
            callType: "",
            fromFloor: "",
            toFloor: "",
            type: 1
        },
        methods: {
            appCall: function () {
                if (this.callType != null && this.callType.length > 0
                    || this.liftId != null && this.liftId.length > 0
                    || this.fromFloor != null && this.fromFloor.length > 0
                    || this.toFloor != null && this.toFloor.length > 0) {
                    this.liftId = this.liftId.trim();
                    if (this.liftId.length == 0) {
                        return layer.msg("电梯编号不能为空");
                    } else {
                        if (this.liftId.length == 7) {
                            this.data = this.callType + this.fromFloor.toString(16) + this.toFloor.toString(16) + "0000";
                            var msg = '{devType:"' + this.devType + '",liftId:"' + this.liftId + '",msgNo:"' + this.msgNo + '",ver:"' + this.ver + '",func:"' + this.func + '",addr:"' + this.addr + '",len:"' + this.len + '",data:"' + this.data + '",type:"' + this.type + '"}'
                        } else {
                            return layer.msg("电梯编号为7位");
                        }
                    }
                    websocket.send(msg)
                } else {
                    layer.msg("请将数据填写完整");
                }

            }
        }
    })
    var vm2 = new Vue({
        el: "#app2",
        data: {
            devType: "01",
            liftId: "",
            msgNo: "00",
            ver: "01",
            func: "12",
            addr: "20001000",
            len: "0002",
            data: "8000",
            type: 2
        },
        methods: {
            clear: function () {
                if (this.liftId != null && this.liftId.length > 0) {
                    this.liftId = this.liftId.trim();
                    if (this.liftId.length == 0) {
                        return layer.msg("电梯编号不能为空");
                    } else {
                        if (this.liftId.length == 7) {
                            var msg = '{devType:"' + this.devType + '",liftId:"' + this.liftId + '",msgNo:"' + this.msgNo + '",ver:"' + this.ver + '",func:"' + this.func + '",addr:"' + this.addr + '",len:"' + this.len + '",data:"' + this.data + '",type:"' + this.type + '"}'
                        } else {
                            return layer.msg("电梯编号为7位");

                        }

                    }
                    websocket.send(msg)
                } else {
                    layer.msg("请将数据填写完整");
                }
            }
        }
    })
    var vm3 = new Vue({
        el: "#app3",
        data: {
            devType: "01",
            liftId: "",
            msgNo: "00",
            ver: "01",
            func: "21",
            addr: "",
            len: "",
            data: "",
            type: 3
        },
        methods: {
            appCall: function () {
                if (this.liftId != null && this.liftId.length > 0
                    || this.addr != null && this.addr.length > 0
                    || this.lean != null && this.lean.length > 0) {
                    this.liftId = this.liftId.trim();
                    this.addr = this.addr.trim();
                    this.len = this.len.trim();
                    if (this.liftId.length !== 7) {
                        return layer.msg("电梯编号为7位");
                    } else if (this.addr.length !== 8) {
                        return layer.msg("addr为8位");
                    } else if (this.len.length !== 4) {
                        return layer.msg("len为4位");
                    }
                    var msg = '{devType:"' + this.devType + '",liftId:"' + this.liftId + '",msgNo:"' + this.msgNo + '",ver:"' + this.ver + '",func:"' + this.func + '",addr:"' + this.addr + '",len:"' + this.len + '",data:"' + this.data + '",type:"' + this.type + '"}'
                    websocket.send(msg)
                } else {
                    layer.msg("请将数据填写完整");
                }
            }
        }
    })
    var vm4 = new Vue({
        el: "#app4",
        data: {
            devType: "01",
            liftId: "",
            msgNo: "00",
            ver: "01",
            func: "12",
            addr: "20002000",
            writerType: "",
            len: "",
            cmd: "",
            waddr: "",
            wdata: "",
            data: "",
            type: 4
        },
        methods: {
            appCall: function () {
                if (this.liftId != null && this.liftId.length > 0
                    || this.waddr != null && this.waddr.length > 0
                    || this.wdata != null && this.wdata.length > 0 ||
                    this.writerType.length !== null) {
                    this.liftId = this.liftId.trim();
                    this.waddr = this.waddr.trim();
                    this.wdata = this.wdata.trim();
                    if (this.liftId.length !== 7) {
                        return layer.msg("电梯编号为7位");
                    } else if (this.writerType.length == 0) {
                        return layer.msg("写入方式不为空");
                    } else if (this.waddr.length !== 8) {
                        return layer.msg("待写入addr为8位");
                    } else if (this.wdata.length != 8) {
                        return layer.msg("data为8位");
                    } else {
                        if (this.liftId.length == 7) {
                            if (this.writerType == 1) {
                                this.len = "0007"
                                this.cmd = "8000"
                            } else if (this.writerType == 2) {
                                this.len = "0008"
                                this.cmd = "8001"
                            } else {
                                this.len = "000A"
                                this.cmd = "8002"
                            }
                            this.data = this.cmd + this.waddr + this.wdata
                            var msg = '{devType:"' + this.devType + '",liftId:"' + this.liftId + '",msgNo:"' + this.msgNo + '",ver:"' + this.ver + '",func:"' + this.func + '",addr:"' + this.addr + '",len:"' + this.len + '",data:"' + this.data + '",type:"' + this.type + '"}'
                        } else {
                            return layer.msg("电梯编号为7位");
                        }
                    }
                    websocket.send(msg)
                } else {
                    layer.msg("请将数据填写完整");
                }
            }
        }
    })
    var vm5 = new Vue({
        el: "#app5",
        data: {
            devType: "01",
            liftId: "",
            msgNo: "00",
            ver: "01",
            func: "12",
            addr: "20002100",
            len: "",
            data: "",
            type: 5
        },
        methods: {
            appCall: function () {
                if (this.liftId != null && this.liftId.length > 0
                    || this.data != null && this.data.length > 0
                    || this.len != null && this.len.length > 0) {
                    this.liftId = this.liftId.trim();
                    this.data = this.data.trim();
                    this.len = this.len.trim();
                    if (this.liftId.length !== 7) {
                        return layer.msg("电梯编号为7位");
                    } else if (this.len.length !== 4) {
                        return layer.msg("len为4位");
                    } else if (this.data.length == 0) {
                        return layer.msg("data不为空");
                    }
                    var msg = '{devType:"' + this.devType + '",liftId:"' + this.liftId + '",msgNo:"' + this.msgNo + '",ver:"' + this.ver + '",func:"' + this.func + '",addr:"' + this.addr + '",len:"' + this.len + '",data:"' + this.data + '",type:"' + this.type + '"}'
                    websocket.send(msg)
                } else {
                    layer.msg("请将数据填写完整");
                }
            }
        }
    })
    var vm6 = new Vue({
        el: "#app6",
        data: {
            devType: "01",
            liftId: "",
            msgNo: "00",
            ver: "01",
            func: "12",
            addr: "",
            waddr: "",
            len: "0006",
            cmd: "8000",
            data: "",
            type: 6,
            status: 0
        },
        computed: {
            address() {
                const { liftId, waddr } = this
                return {
                    liftId,
                    waddr
                }
            }
        },
        watch: {
            address: {
                handler: function (val) {
                    console.log(11);
                    if (this.status = 1) {
                        this.status = null
                    }
                },
                deep: true
            }
        },
        methods: {
            appCall: function (reqParam) {
                if (this.liftId != null && this.liftId.length > 0
                    || this.waddr != null && this.addr.wlength > 0) {
                    this.liftId = this.liftId.trim();
                    this.waddr = this.waddr.trim();
                    if (this.liftId.length !== 7) {
                        return layer.msg("电梯编号为7位");
                    } else if (this.waddr.length !== 8) {
                        return layer.msg("待写入addr为8位");
                    }
                    this.addr = "20003000"
                    this.len = "0006"
                    this.data = this.cmd + this.waddr;
                    var msg = '{devType:"' + this.devType + '",liftId:"' + this.liftId + '",msgNo:"' + this.msgNo + '",ver:"' + this.ver + '",func:"' + this.func + '",addr:"' + this.addr + '",len:"' + this.len + '",data:"' + this.data + '",type:"' + this.type + '"}'
                    websocket.send(msg)
                } else {
                    layer.msg("请将数据填写完整");
                }
            },
            appCall2: function () {
                if (this.len != null && this.len.length > 0 ||
                    this.data != null && this.data.length > 0) {
                    if (this.len.length != 4) return layer.msg("len为4位");
                    this.addr = this.waddr
                    this.type = 7
                    var msg = '{devType:"' + this.devType + '",liftId:"' + this.liftId + '",msgNo:"' + this.msgNo + '",ver:"' + this.ver + '",func:"' + this.func + '",addr:"' + this.addr + '",len:"' + this.len + '",data:"' + this.data + '",type:"' + this.type + '"}'
                    websocket.send(msg)
                } else {
                    layer.msg("请将数据填写完整");
                }
            }
        }
    })


    // $(".btn-box").find("#btn:first").show();	 //为每个BOX的第一个元素显示	   
    $(".content .item").hide().eq(0).show();
    $(".btn-box #btn1").on("click", function () { //给a标签添加事件

        var index = $(this).index();  //获取当前a标签的个数

        $(".content .item").hide().eq(index).show(); //返回上一层，在下面查找css名为box隐藏，然后选中的显示

        $(this).removeClass('jz').addClass("active").siblings().removeClass("active").addClass("jz"); //a标签显示，同辈元素隐藏

    })



</script>

</html>
</head>